﻿@inject IWebHostEnvironment _hostEnvironment
@using System.IO
@using Masuit.Tools
@using Microsoft.AspNetCore.Hosting

@{
    string[] colors = { "success", "info", "primary", "warning", "danger" };
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>404-页面找不到啦！</title>
    <style type="text/css">
        .link, .texts {
            margin: 0 auto 15px;
            color: #505050;
        }

        .texts {
            line-height: 2;
        }

            .texts dd {
                margin: 0;
                padding: 0 0 0 15px;
            }

            .texts ul {
                margin: 0;
                padding: 0;
            }

        .portal {
            color: #505050;
            text-align: center;
            white-space: nowrap;
            word-spacing: 0.45em;
        }

            .portal a:link, .portal a:visited {
                color: #505050;
                word-spacing: 0;
            }

            .portal a:hover, .portal a:active {
                color: #007ab7;
            }

        .STYLE1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 65px;
        }

        body {
            background-image: url(/images/bg2.jpg);
            background-size: cover;
            background-position: 50% 0;
            margin: 0;
        }

            body:before {
                content: '';
                display: inline-block;
                vertical-align: middle;
            }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://cdn.staticfile.org/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
    <script src="https://cdn.staticfile.org/phaser/3.24.1/phaser.min.js"></script>
    <script src="~/Assets/catchcat/catch-the-cat.js"></script>
</head>
<body>
    <div class="container">
        <header id="header" class="page-header text-center">
            <h1><a href="/">Oops!</a></h1>
        </header>
        <div id="container">
            @{
                Random r = new Random();
                string imgPath = $"/Assets/images/404/404{r.StrictNext(Directory.GetFiles(_hostEnvironment.WebRootPath + "/Assets/images/404").Length) + 1}.jpg";
            }
            <img class="img img-responsive img-thumbnail" width="100%" src="@imgPath" alt="@ViewBag.Keywords" />
            <h3 class="margintop20">
                <em>
                        <span class="STYLE1">404 Error&nbsp;</span>
                    </em>:所查找的页面不存在,可能已被删除或您输错了网址!
            </h3>
            <a class="btn btn-info btn-lg" href="/"><i class="icon-reply">返回首页</i></a>
            <dl class="texts">
                <dt class="h2">正在联系火星总部查找您所需要的页面.请返回等待信息......</dt>
                <dd>
                    <ul>
                        <li class="h2">不要返回吗?</li>
                        <li class="h3">确定不要返回吗?</li>
                        <li class="h4">真的真的确定不要返回吗?</li>
                        <li class="h5">好吧.还是随便你要不要真的确定返回吧</li>
                        <li class="h6">要是真的不愿意返回就玩个游戏吧，机会很难得哦——</li>
                        <li>将猫困在一个深色圆点围成的圈子里面就算成功了！</li>
                    </ul>
                </dd>
                <div id="games"></div>
            </dl>
        </div>
    </div>
    <div class="layer animated fadeIn">
        <div class="loadEffect">
            @for (int i = 0; i < 7; i++)
            {
                <div>
                    <span class="bg-@colors[new Random().StrictNext() % 5]"></span>
                </div>
            }
        </div>
    </div>
</body>
</html>
<script>
    $(document).ready(function () {
        window.game = new CatchTheCatGame({
            w: 11,
            h: 11,
            r: 20,
            backgroundColor: 0xffffff,
            parent: 'games',
            statusBarAlign: 'center',
            credit: 'masuit.com'
        });
        setTimeout(function () {
            try {
                $('body').ripples({
                    resolution: 512,
                    dropRadius: 20, //px
                    perturbance: 0.04,
                });
            }
            catch (e) {
                $('.error').show().text(e);
            }
        }, 1000);
    });
</script>